import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  Image,
} from 'react-native';
import NavBar from '../../../components/PublicHeader';
import ImagePicker from 'react-native-image-crop-picker';
import Layer from '../../../utils/Layer';
import { Constant } from '../../../public/js/constant';
import getStorageValue from '../../../utils/getStorageValue';
import fetchWebApi from '../../../public/WebApi/fetchBase';
import { GET_USER_COMPLAINT, POST_USER_ADDCOMPLAINT, POST_ALBUMINFDOATA_UPLOAD } from '../../../public/WebApi/mailListApi';
import RNFS from 'react-native-fs'

export default class complaint extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reasonList: [],
      selectImage1: [],
      flags: false,
      complaint: [],
      screen: [],
      describe: '',
      contents: '',
      typeArr: '',
      len: [],
    };
  }

  componentDidMount = () => {
    this.getComplaint()
  };


  // 上传七牛云
  async uploadDatasbase() {
    const res = await fetchWebApi(POST_ALBUMINFDOATA_UPLOAD, {
      fileContent: this.state.contents,
      type: this.state.typeArr
    }, 'POST')
    // console.log('################ upload');
    // console.log(res);
    this.state.screen.push(res.url)
  }

  // 查询投诉原因api
  async getComplaint() {
    const res = await fetchWebApi(GET_USER_COMPLAINT, { token: await getStorageValue(Constant.TOKEN) }, 'GET')
    // console.log("######### getComplaint");
    // console.log(res);
    if (res.status == 200) {
      this.setState({
        reasonList: res.data
      })
    }
  }


  // 提交投诉
  async addComplaint() {
    this.state.reasonList.map(item => {
      if (item.flag == true) {
        this.state.complaint.push(item.code)
      }
    })
    this.state.selectImage1.map(item => {
      this.state.screen.push(item.path)
    })
    const res = await fetchWebApi(POST_USER_ADDCOMPLAINT,
      {
        token: await getStorageValue(Constant.TOKEN),
        complaint: this.state.complaint,
        describe: JSON.stringify(this.state.describe),
        screen: this.state.screen,
        objectUserId: '1616508605501149184',
      }, 'POST')
    // console.log('######### addComplaint');
    // console.log(res);
    if (res.status == 200) {
    }
  }

  // 投诉原因点击y
  complaintClick(index) {
    var list = this.state.reasonList
    list.map((item, _index) => {
      if (index == _index) {
        this.setState({
          flag: (item.flag = !item.flag),
          flags: true
        })
      }
    })
  }

  render() {
    //   判断是否点击投诉原因显示或隐藏
    let showtext = this.state.flags ?
      <>
        {/* 举报原因，提供信息 */}
        <View style={styles.description}>
          <Text style={styles.description_text}>举报描述</Text>
          <TextInput
            onEndEditing={(value) => {
              this.setState({
                describe: value.nativeEvent.text
              })
            }}
            placeholder="提供更多信息有助于举报快速解决。"
            multiline={true}
            numberOfLines={4}
            style={styles.description_input}
            allowFontScalin={true}
          />
        </View>
        {/* // 上传图片 */}
        <View style={styles.upload}>
          <View style={styles.upload_titles}>
            <Text style={styles.upload_text}>图片证据</Text>
            <Text style={styles.upload_text2}>最少一张，最多3张</Text>
          </View>
          <View style={styles.pic}>
            <TouchableOpacity
              style={styles.upload_pic}
              // 提交图片
              onPress={() => {
                ImagePicker.openPicker({
                  width: 300,
                  height: 400,
                  multiple: true
                }).then(images => {
                  if (images.length > 3) {
                    Layer.showMsg('最多选择三张图片')
                  } else {
                    this.setState({
                      selectImage1: images
                    })
                    this.state.selectImage1.map(item => {
                      // 将路径分割，取出图片类型
                      this.state.len.push(item.path.split('.'))
                      this.state.len.map(item => {
                        this.setState({
                          typeArr: item[item.length - 1]
                        })
                      })
                      this.setState({
                        screen: []
                      })
                      RNFS.readFile(item.path, 'base64')
                        .then(content => {
                          // base64 本地相册地址转换
                          this.setState({
                            contents: content
                          })
                          this.uploadDatasbase()
                        })
                    })
                  }
                })
                  .catch(err => {
                    console.log(err);
                  })
              }}>
              <Text style={styles.pic_text}>+</Text>
            </TouchableOpacity>
            {/* 渲染图片 */}
            <View style={styles.imglist2}>
              {
                this.state.selectImage1.map((item, index) => {
                  return (
                    <View key={index} style={styles.pic_view}>
                      <Image style={styles.view_img} source={{ uri: item.path }} />
                    </View>
                  )
                })
              }
            </View>
          </View>
        </View>
        <TouchableOpacity onPress={() => {
          this.addComplaint()
        }} style={styles.btn}>
          <Text style={styles.btn_text}>提交</Text>
        </TouchableOpacity>
      </> : null
    return (
      <View style={{ flex: 1 }}>
        <NavBar navigation={this.props.navigation} title={'投诉'} />
        {/* 键盘顶起输入框 */}
        <KeyboardAvoidingView behavior="padding" enabled>
          <ScrollView>
            <View style={styles.reason}>
              {/* 投诉原因列表 */}
              <Text style={styles.reason_text}>请选择投诉该账号的原因？</Text>
              <View style={styles.reason_list}>
                {this.state.reasonList.map((item, index) => {
                  return (
                    <TouchableOpacity
                      //   点击是否隐藏,更改样式
                      onPress={() => {
                        this.complaintClick(index)
                      }}
                      style={
                        !item.flag ? styles.reason_box : styles.reason_box2
                      }
                      key={index}>
                      <Text
                        style={
                          !item.flag ? styles.box_text : styles.box_text2
                        }>
                        {item.name}
                      </Text>
                    </TouchableOpacity>
                  );
                })}
              </View>
              <View>
                {showtext}
              </View>

            </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent',
  },
  reason: {
    padding: 20,
  },
  reason_text: {
    fontSize: 18,
  },
  reason_list: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
    flexWrap: 'wrap',
  },
  reason_box: {
    borderWidth: 1,
    borderColor: '#ccc',
    width: 164,
    height: 30,
    marginTop: 15,
    backgroundColor: '#EFEFEF',
    flexDirection: 'column',
    justifyContent: 'center'
  },
  reason_box2: {
    borderWidth: 1,
    borderColor: '#9DD0FF',
    width: 164,
    height: 30,
    marginTop: 15,
    backgroundColor: '#D7ECFF',
    flexDirection: 'column',
    justifyContent: 'center'
  },
  box_text: {
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    color: '#00000078',
  },
  box_text2: {
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    color: '#0084FF',
  },
  description: {
    marginTop: 10,
    padding: 10,
  },
  description_text: {
    fontSize: 20,
  },
  description_input: {
    backgroundColor: 'white',
    marginTop: 20,
    borderRadius: 20,
    textAlign: 'center',
    height: 200,
  },
  upload: {
    padding: 10,
    marginTop: 10,
  },
  upload_titles: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  upload_text: {
    fontSize: 19,
  },
  upload_text2: {
    color: '#00000080',
  },
  upload_pic: {
    width: 100,
    height: 100,
    marginTop: 20,
    backgroundColor: '#ECECEC',
    borderRadius: 20,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  pic_text: {
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 100,
    color: '#C4C4C4',
  },
  btn: {
    backgroundColor: '#1890FF',
    borderRadius: 20,
    padding: 15,
    marginTop: 20
  },
  btn_text: {
    color: '#fff',
    alignSelf: 'center',
    fontSize: 16
  },
  pic: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-start',
  },
  imglist2: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start'
  },
  pic_view: {
    width: 100,
    height: 100,
    marginTop: 20,
    marginEnd: 20
  },
  view_img: {
    width: 100,
    height: 100,
    borderRadius: 20
  }
});
